<template>
    <div class="login-main">
        <img class="bg-img" src="@/assets/login/bg.png" alt="">
        <img class="title"src="@/assets/login/title.png" alt="">
        <div class="login-content">
            <div class="login-form">
                <img src="@/assets/login/form-title.png" style="width: 640px;height: 84px;" alt="">
                <div class="tabs">
                    <div class="tab-title">
                        <div class="tab-title-item" v-on:click="()=>{this.loginType='password'}">
                            <span :class="['tab-title-1', loginType==='password'?'active':'']">账号密码登录</span>
                        </div>
                        <div class="tab-title-item tab-title-2" v-on:click="()=>{this.loginType='phone'}">
                            <span :class="['tab-title-2', loginType==='phone'?'active':'']">手机验证码登录</span>
                        </div>
                    </div>
                    <Form v-if="loginType==='password'">
                        <div class="t-input">
                            <el-input v-model="count" placeholder="请输入手机号或邮箱" ></el-input>
                            <div class="message">
                                {{countMessage}}
                            </div>
                        </div>
                        <div class="t-input" style="margin-top: 40px">
                            <el-input v-model="password" placeholder="请输入密码" ></el-input>
                            <div class="message">
                                {{passwordMessage}}
                            </div>
                        </div>
                        <div>
                            <div class="t-input" style="margin-top: 40px">
                                <div style="display: flex">
                                    <el-input v-model="valid" placeholder="请输入验证码"></el-input>
                                    <span class="valid-btn valid-no-border">
                                        <img src="@/assets/login/valid.jpg" alt="" style="width: 100%;height: 100%">
                                    </span>
                                </div>
                                <div class="message">
                                    {{validMessage}}
                                </div>
                            </div>
                        </div>
                    </Form>
                    <Form v-if="loginType==='phone'">
                        <div class="t-input">
                            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                            <div class="message">
                                {{phoneMessage}}
                            </div>
                        </div>
                        <div>
                            <div class="t-input" style="margin-top: 40px">
                                <div style="display: flex">
                                    <el-input v-model="validPhone" placeholder="请输入验证码"></el-input>
                                    <span class="valid-btn">获取验证码</span>
                                </div>
                                <div class="message">
                                    {{validPhoneMessage}}
                                </div>
                            </div>
                        </div>
                    </Form>
                </div>
                <div class="conform-btn" v-on:click="handleLogin()">
                    确认登录
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        components:{  },
        data(){
            return{
                loginType:'password',
                count:'',
                countMessage:'',
                password:'',
                passwordMessage:'',
                valid:'',
                validMessage:'',
                phone:'',
                phoneMessage:'',
                validPhone:'',
                validPhoneMessage:''
            }
        },
        methods:{
            validate(){
                let flag = true
                const messageMap = ['手机号或邮箱不能为空','密码不能为空','验证码不能为空']
                this.countMessage = ''
                this.passwordMessage=''
                this.validMessage=''
                if(this.count===''){
                    this.countMessage = messageMap[0]
                    flag = false
                }
                if(this.password===''){
                    this.passwordMessage = messageMap[1]
                    flag = false
                }
                if(this.valid===''){
                    this.validMessage = messageMap[2]
                    flag = false
                }
                return flag
            },
            validatePhone(){
                let flag = true
                const messageMap = ['手机号不能为空','验证码不能为空']
                this.countMessage = ''
                this.passwordMessage=''
                this.validMessage=''
                if(this.phone===''){
                    this.phoneMessage = messageMap[0]
                    flag = false
                }
                if(this.validPhone===''){
                    this.validPhoneMessage = messageMap[1]
                    flag = false
                }
                return flag
            },
            handleLogin(){
                console.log(this.loginType)
                if(this.loginType==='password'){
                    if(this.validate())
                    this.jump()
                }else {
                    if(this.validatePhone()){
                        this.jump()
                    }
                }

            },
            jump(){
                this.$router.push('/home')
            }
        }
    }
</script>

<style scoped lang="less">
    .login-main{
        width: 100%;
        height: 100%;
        .bg-img{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }
        .title{
            /*position: absolute;*/
            width: 675px;
            height: 118px;
            margin: 20px 0 0 30px;
        }
        .login-content{
            width: 100%;
            height: 100vh;
            /*min-width: 1920px;*/
            /*min-height: 1080px;*/
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .login-form{
                width: 640px;
                height: 657px;
                background: rgba(7,7,7,0.65);
                border: 1px solid rgba(77,77,77,1);
                border-radius: 0px 0px 4px 4px;
                position: relative;
                .tabs{
                    margin-top: 20px;
                    .tab-title{
                        display: flex;
                        flex-direction: row;
                    }
                    .tab-title-item{
                        width: 320px;
                        font-size: 22px;
                        color: #BEBEBE;
                        letter-spacing: 0;
                        text-align: center;
                        font-weight: 400;
                        cursor: pointer;
                    }
                    .active{
                        display: inline-block;
                        width: 188px;
                        color: #fff;
                        padding-bottom: 8px;
                        border-bottom: 2px solid #F8733B ;
                    }
                }
                Form{
                    margin-top: 43px;
                    padding: 0 30px;
                }
                .conform-btn{
                    width: 580px;
                    height: 60px;
                    background: #CC4A13;
                    border: 2px solid rgba(255,74,71,1);
                    border-radius: 4px;
                    position: absolute;
                    bottom: 60px;
                    margin: 0 30px;
                    font-family: ziticqtezhanti;
                    font-size: 22px;
                    color: #FFFFFF;
                    letter-spacing: 0;
                    text-align: center;
                    font-weight: 400;
                    line-height: 60px;
                    cursor: pointer;
                }

            }
        }
    }
    .t-input{
        width: 580px;
        height: 60px;
        /deep/ .el-input__inner {
            width: 100%;
            height: 60px;
            padding: 0 27px;
            display: inline-block;
            font-size: 18px;
            color: #CCCCCC;
            background: rgba(7,7,7,0.30);
            border: 1px solid rgba(77,77,77,1);
            &:focus{
                border: 1px solid rgba(248,115,59,1);
            }
        }
        .message{
            padding: 0 27px;
            color: #FF4A47;
            font-size: 18px;
        }
        .valid-btn{
            display: inline-block;
            margin-left: 20px;
            width: 180px;
            height: 58px;
            line-height: 60px;
            background: #482006;
            border: 1px solid rgba(248,115,59,1);
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
            border-radius: 4px;
        }
        .valid-no-border{
            height: 60px;
            border: none;
        }
    }
</style>
